<template>
	<view class="warp">
		<uni-nav-bar background-color="#fe5c83"
		 color="#f1f1f1" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">我的金币</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			  <view class="right_record" @click="torecord">充值记录</view>
			<!-- #endif -->
		   </view>
		</uni-nav-bar>
		<view class="bg">
			<view class="my_gold">
			   	<view class="top_number">
			   		<view class="icon">
						<image style="width: 60rpx;height: 60rpx;" src="/static/images/gold.png" mode=""></image>
			   		    <view class="number">
			   		    	<text class="amount">{{$getPartNumber(balanceAmount.balanceAvailable,'int')}}</text>
							<text class="unit">{{$getPartNumber(balanceAmount.balanceAvailable,'decimal')}}</text>
			   		    </view>
						<view class="shuaxin">
							<uni-icons color="#cecece" type="refreshempty" size="20"></uni-icons>
						</view>
					</view>
			   	</view>
				<view class="bo_number">
					<view class="left">
						<view class="act_gold">可用</view>
						<view class="act_number" >
							<text>{{$getPartNumber(balanceAmount.rechargeSum,'int')}}</text>
						    <text>{{$getPartNumber(balanceAmount.rechargeSum,'decimal')}}</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="right">
						<view class="act_gold">冻结</view>
						<view class="act_number">0.00</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				  <view class="right_record"  @click="torecord">充值记录</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 充值 -->
		<view class="recharge_gord">
			<view class="title">充值金额</view>
			<view class="amount_view flex_row_start_start">
				<text :class="{num: true,flex_row_center_center: true,hasSelAmout: Number(amount) == item}"
				 v-for="(item, index) in amountList" :key="index" @click="selAmount(item)">{{ item }}元</text>
				<input :class="{num: true,flex_row_center_center: true,input_amount: true,hasSelAmout: !amount && input_amount}" placeholder="请输入金额" v-model="input_amount" placeholder-class="input_placeholder" maxlength="5"
					@focus="selSetAmount" @blur="handleBlur" type="digit" />
			</view>
		</view>
		<view class="pay_part flex_column_start_start">
			<text class="title">选择充值方式</text>
			<view v-for="(item, index) in payMethod" :key="index"
			 @click="selectPayMethod(item)"
			  :class="{item: true,b_b: index < payMethod.length - 1,flex_row_between_center: true}">
				<view class="left flex_row_start_center">
					<uni-icons color="#33d642" fontFamily="CustomFont" :size="20">{{item.payIcon}}</uni-icons>
					<text class="tit">{{ item.payMethodName }}</text>
				</view>
				<uni-icons
				 :type="item.payMethod == selData.payMethod ? 'circle-filled':'circle'"
				 :color="item.payMethod == selData.payMethod ? '#fe5c83':'#000'"
				 size="24"></uni-icons>

			</view>
		</view>
		<view  class="btn_recharge flex_row_center_center" @click="reCharge">确认充值</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istrue:false,
				selData: {
					payMethod:'wx',
					payType:'MINIAPP',
				},
				rechargeSn: '',
				amount: 0,//金额
				input_amount: '',//自定义输入金额
				wxBrowerCode: '', //微信浏览器支付的code
				client: 'wxbrowser', //支付发起来源 pc==pc,mbrowser==移动设备浏览器,app==app,wxxcx==微信小程序,wxbrowser==微信内部浏览器
	            isClick: true,	
				balanceAmount:{},
				amountList:[10,100,200,300,400],
				payMethod:[],
			};
		},
		onLoad(){
			
		   this.initClient();
		   this.getBanlance();
		},
		methods:{
			//初始化终端类型
			initClient() {
				//#ifdef APP-PLUS
				this.client = 'app'
				let value = {
						payMethod:'wx',
						payType:'APP',
						payMethodName:'微信支付',
						payIcon:'\ue62a',
						color:'#33d642',
					}
				this.payMethod.push(value)
				//#endif
				
				//#ifdef MP-WEIXIN
				this.client = 'wxxcx'
				let value = {
						payMethod:'wx',
						payType:'MINIAPP',
						payMethodName:'微信支付',
						payIcon:'\ue62a',
						color:'#33d642',
					}
				this.payMethod.push(value)
				//#endif
				this.selData = this.payMethod[0]
			},
			getBanlance(){
				this.$request({
				  url: 'v3/member/front/balanceRecharge/getMemberBalance',
				  method: 'GET'
				})
				  .then((res) => {
				    if (res.state == 200) {
				     this.balanceAmount=res.data
				    } else {
				      this.$modal.msg(res.msg)
				    }
				  })
				  .catch((e) => {})
			},
			//选择充值金额
			selAmount(amount) {
				this.input_amount = ''
				this.amount = amount
			},
			//设置金额聚焦事件
			selSetAmount() {
				this.amount = ''
				this.showBtn = false
				this.isClick = true
			},
			//输入金额
			handleBlur(e) {
				this.showBtn = true
				let val = parseFloat(e.detail.value.toString())
				// if (val > 5000) {
				// 	this.$api.msg(this.$L('一次最多充值5000元'))
				// 	this.input_amount = 5000
				// } else {
					if (this.balance + val > 999999.0) {
						this.$modal.msg('当前账号余额已达最大值')
					} else if (val <= 0) {
						this.$modal.msg('充值金额不能为负数或者为零')
						this.input_amount = ''
					} else if (Number.isNaN(val)) {
						this.input_amount = ''
					} else {
						//小数点后最多后两位
						this.input_amount =
							val.toString().indexOf('.') == -1 ?
							val :
							val.toString().substring(0, val.toString().indexOf('.') + 3) > 0 ?
							val.toString().substring(0, val.toString().indexOf('.') + 3) :
							''
						if (this.input_amount == '') {
							this.$modal.msg('充值金额不能为负数或者为零')
						}
					}
				// }
			},
			//确认充值事件
			reCharge(){
				const {
					selData,
					rechargeSn,
					amount,
					input_amount,
					wxBrowerCode,
					client
				} = this
				console.log('selData',selData);
				console.log('rechargeSn',rechargeSn);
				console.log('amount',amount);
				console.log('input_amount',input_amount);
				console.log('wxBrowerCode',wxBrowerCode);
				console.log('client',client);
				
				let _this = this
				if (!this.isClick) {
					return false
				}
				this.isClick = false
				
				uni.showLoading()
				let param = {}
				param.method = 'POST'
				param.data = {}
				if (rechargeSn) {
					param.url = 'v3/member/front/balanceRecharge/rechargeContinue'
					param.data.rechargeSn = rechargeSn
				} else {
					param.url = 'v3/member/front/balanceRecharge/recharge'
					param.data.amount = amount || input_amount
					console.log('param.data.amount',param.data.amount);
					if (!param.data.amount) {
						this.$modal.msg('请设置充值金额')
						return false
					}
				}
				param.data.payType = selData.payType
				param.data.payMethod = selData.payMethod
				
				if (client == 'wxxcx') {
					console.log('hhhhh');
					//微信小程序支付
					uni.login({
						success: (code) => {
							console.log('code',code);
							param.data.code = code.code
							param.data.codeSource = 1 //用户code来源（JSAPI支付时必填）：1==小程序，2==微信内部浏览器
							this.$request(param)
								.then((res) => {
									console.log('res-weixin',res);
									if (res.state == 200) {
										uni.hideLoading()
										let tmp_data = res.data.payData
										if (res.data.actionType == null) {
											//微信小程序支付
											uni.requestPayment({
												timeStamp: tmp_data.timeStamp,
												nonceStr: tmp_data.nonceStr,
												package: tmp_data.packageValue,
												signType: 'MD5',
												paySign: tmp_data.paySign,
												success: function(res) {
													_this.payTip('success')
												},
												fail: function(res) {
													_this.payTip('fail')
												}
											})
										}
									} else {
										this.isClick = true
										// this.$api.msg(res.msg)
										uni.hideLoading()
									}
								})
								.catch((e) => {})
						}
					})
					return false
				}
				
				console.log('param',param);
				
				this.$request(param)
					.then((res) => {
						console.log('resresres',res);
						if (res.state == 200) {
							uni.hideLoading()
							let tmp_data = res.data.payData
							if (res.data.actionType == 'redirect') {
								window.location.href = tmp_data
							} else if (res.data.actionType == null) {
								 if(client == 'app') {
									//APP支付
									let provider = ''
									let orderInfo = {}
									if (selData.payMethod == 'wx') {
										provider = 'wxpay'
										orderInfo.appid = tmp_data.appId
										orderInfo.noncestr = tmp_data.nonceStr
										orderInfo.package = tmp_data.packageValue
										orderInfo.partnerid = tmp_data.partnerId
										orderInfo.prepayid = tmp_data.prepayId
										orderInfo.timestamp = tmp_data.timeStamp
										orderInfo.sign = tmp_data.sign
									} else if (selData.payMethod == 'alipay') {
										provider = 'alipay'
									}
									uni.requestPayment({
										provider: provider,
										orderInfo: provider == 'alipay' ? res.data.payData : orderInfo, //订单数据
										success: function(res) {
											_this.payTip('success')
										},
										fail: function(err) {
											_this.payTip('fail')
											_this.isClick = true
										}
									})
								}
							} else if (res.data.actionType == 'autopost') {
								document.write(res.data.payData)
							}
						} else {
							this.isClick = true
							// this.$api.msg(res.msg)
							uni.hideLoading()
						}
					})
					.catch((e) => {})
			},
			//支付操作完成提示
			payTip(type) {
				if (type == 'success') {
					this.isClick = true
					//提示充值成功，如果来自账户充值页面，直接跳转充值明细列表页面，否则返回上一级页面（充值详情页面），并更新数据	rechargeBalance:用户充值		rechargeDetail：充值详情
					this.$modal.msg('充值成功')
					
					this.getBanlance()
					
							
				} else if (type == 'fail') {
					//提示充值失败 刷新界面
					this.$modal.msg('充值失败,请重试～')
					this.isClick = true
				}
			},
			
			torecord(){
				uni.navigateTo({
					url:"/pages/moreModule/goldRecord/goldRecord"
				})
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
		background-color: #fff;
	}
	.right_record{
		position: absolute;
		right: 10rpx;
		bottom: 5rpx;
		font-size: 24rpx;
		color:  #fff;
		background-color:#fe5c83;
		padding: 4rpx 10rpx;
		border-radius: 15rpx;
		
	}
	.amount {
	  font-size: 46rpx;
	  font-weight: bold;
	  line-height: 46rpx;
	}
	.unit {
	  font-size: 24rpx;
	  margin-left: 5rpx;
	}
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #f1f1f1;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}

	
	 
	.bg{
		background-color: #fe5c83;
		height: 350rpx;
		padding-top: 50rpx;
	}
	// 我的金币
	.my_gold{
		margin: 0 auto;
		height: 300rpx;
		width: 80%;
		background-color: #ffecee;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		
		
		.record_button{
			position: relative;
		}
		.top_number{
			padding-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			 justify-content: space-between;
			 flex-direction: column;
			
			  .icon{
				  display: flex;
				  align-items: center;
				  
				  .number{
				       padding: 0 16rpx;
				       font-size: 38rpx;
					   font-weight: 550;
				  }
			  }
		   
		  
		} 
		.bo_number{
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.left,.right{
				width: 260rpx;
				font-size: 28rpx;
				text-align: center;
				.act_gold{
					color: #949494;
				}
				.act_number{
					color: #323333;
					font-size: 30rpx;
					font-weight: 550;
					margin-top: 16rpx;
				}
			}
			.line{
				width: 2rpx;
				height: 80rpx;
				background-color: #cecece;
			}
		}
	}
	.recharge_gord{
		padding: 30rpx 10rpx;
		background-color: #fff;
		.title{
			font-size: 32rpx;
			font-weight: 550;
		}
		
	}
	.amount_view {
		flex-wrap: wrap;
		
	
		.num {
			width: 223rpx;
			height: 129rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 20rpx 0px rgba(153, 153, 153, 0.2);
			border-radius: 15rpx;
			color: #000;
			font-size: 36rpx;
			margin: 20rpx 0 0 20rpx;
			line-height: 129rpx;
	
			&.hasSelAmout {
				border: 1rpx solid #fe5c83;
			}
		}
	
		.input_placeholder {
			color: #eee;
			font-size: 24rpx;
			text-align: center;
		}
	
		.input_amount {
			text-align: center;
		}
	}
	.pay_part {
		margin-top: 20rpx;
		background: #fff;
		flex: 1;
	
		.title {
			color: #000;
			font-size: 32rpx;
			margin-top: 30rpx;
			margin-left: 20rpx;
		}
	
		.item {
			width: 100%;
			padding: 20rpx;
			position: relative;
	
			.left {
				padding-left: 24rpx;
	
				.tit {
					color: #2e2e2e;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
			
		}
	}
	.btn_recharge {
		width: 670rpx;
		margin: 0 40rpx;
		height: 88rpx;
		background:#fe5c83 ;
		box-shadow: 0px 3rpx 20rpx 0rpx #eee;
		border-radius: 44rpx;
		color: #fff;
		font-size: 36rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-375rpx);
		bottom: 40rpx;
		
	}
	// 支付
	.pay_box{
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		padding: 10rpx 60rpx;
		.top{
			display: flex;
			justify-content: space-between;
			.left_zhi{
				padding: 16rpx 50rpx;
				background-color: #d5eaff;
				 text-align: center;
				 display: flex;
				 align-items: center;
			     border-radius: 46rpx;
			}
			.right_wei{
				padding: 16rpx 50rpx;
				background-color: #e7f8e8;
				 text-align: center;
				 display: flex;
				 align-items: center;
				  border-radius: 46rpx;
			}
		}
		.bottom{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		    font-size: 24rpx;
		}
	}
	
</style>
